<template>
  <a-modal
    :visible="visible"
    title="创建项目"
    width="42%"
    @cancel="cancel"
    @ok="submitData"
  >
    <template #title> 创建项目 </template>
    <div class="content">
      <a-form :model="formData" ref="formRef" label-align="left" :rules="rules">
        <a-row :gutter="12">
          <a-col :span="12">
            <a-form-item
              field="name"
              label="项目名称"
              label-col-flex="70px"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="formData.name" placeholder="请输入名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="code"
              label="项目编码"
              label-col-flex="70px"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="formData.code" placeholder="请输入编码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :span="12">
            <a-form-item
              field="budget"
              label="项目预算"
              label-col-flex="70px"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="formData.budget" placeholder="请输入预算" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              field="type"
              label="项目类型"
              label-col-flex="70px"
              :validate-trigger="['change', 'input']"
            >
              <a-select v-model="formData.type" placeholder="请选择类型">
                <a-option
                  v-for="type in projectTypes"
                  :key="type.value + type.label"
                  :value="type.value"
                  :label="type.label"
                ></a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :span="12">
            <a-form-item field="content" label="项目模版" label-col-flex="70px">
              <a-select
                v-model="formData.protemId"
                placeholder="请选择模版"
                allow-clear
              >
                <a-option
                  v-for="template in projectTemplate"
                  :key="`${template?.id}_${template?.name}`"
                  :value="template?.id"
                  :label="template?.name"
                ></a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="date" label="项目时间" label-col-flex="70px">
              <a-range-picker
                v-model="projectDate"
                @change="timeChange"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
              <!--              <a-input v-model="formData.time" style="width: 182px" />-->
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :span="24">
            <a-form-item
              field="description"
              label="项目描述"
              label-col-flex="70px"
            >
              <a-textarea
                v-model="formData.description"
                placeholder="请输入描述"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineEmits, defineProps, ref, watch } from 'vue';
  import { projectTypes } from '@/directionary/project';
  import { Message, MessageConfig } from '@arco-design/web-vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import {
    getProjectList,
    ProjectListParams,
    createProject,
    projectItem,
  } from '@/api/project';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['update:visible', 'submit']);
  const formRef = ref<FormInstance>();
  const rules = ref({
    name: [
      {
        required: true,
        message: '请输入名称',
      },
    ],
    code: [
      {
        required: true,
        message: '请输入编码',
      },
    ],
    type: [
      {
        required: true,
        message: '请选择类型',
      },
    ],
    budget: [
      {
        required: true,
        message: '请输入预算',
      },
    ],
    date: [
      {
        required: true,
        message: '请选择时间',
      },
    ],
  });
  // 项目模版
  const projectTemplate = ref<{ id?: string; name?: string }[]>([]);
  // 获取所有项目模版
  const getList = () => {
    const params: ProjectListParams = {
      pageNo: 1,
      pageSize: 100000,
      projectType: 1,
    };
    getProjectList(params).then((res: any) => {
      if (res.code === 8000000) {
        projectTemplate.value = res.data?.list || [];
      }
    });
  };

  const formData = ref({
    name: '',
    type: '',
    protemId: '',
    code: '',
    description: '',
    budget: '',
    date: [],
  });

  const projectDate = ref([]);
  const timeChange = (time: any) => {
    formData.value.date = time;
    // projectDate.value = time || [];
  };
  const cancel = () => {
    emits('update:visible', false);
  };
  // eslint-disable-next-line consistent-return
  const submitData = async (): Promise<void> => {
    const result = await formRef?.value?.validate();
    const params = {
      name: formData.value.name || '',
      type: formData.value.type || '',
      protemId: formData.value.protemId || '',
      code: formData.value.code || '',
      description: formData.value.description || '',
      budget: formData.value.budget || '',
      planStart: projectDate?.value[0] || '',
      planEnd: projectDate?.value[1] || '',
    };
    if (
      !params?.name ||
      !params?.code ||
      !params?.budget ||
      !params?.type ||
      !params?.planStart ||
      !params?.planEnd
    ) {
      Message.error('请完整输入项目信息!');
    } else {
      createProject(params as unknown as projectItem).then((res: any) => {
        if (res.code === 8000000) {
          Message.success('创建成功！');
          cancel();
          emits('submit', true);
        }
      });
    }
  };
  const init = () => {
    formRef.value?.clearValidate();
    getList();
  };
  watch(props, (value) => {
    if (value.visible) {
      init();
    }
  });
</script>

<style scoped></style>
